<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
<script id="ColorVS" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    attribute vec2 a_Pin;
    uniform mat4 u_ModelM4;
    uniform mat4 u_PvM4;
    varying vec2 v_Pin;
    void main(){
        gl_Position = u_PvM4 * u_ModelM4 * a_Position;
        gl_PointSize = 10.0;
        v_Pin = a_Pin;
    }
</script>
<script id="ColorFS" type="x-shader/x-fragment">
    precision mediump float;
    uniform sampler2D u_Sampler;
    varying vec2 v_Pin;
    void main(){
        gl_FragColor = texture2D(u_Sampler, v_Pin);
        //gl_FragColor = vec4(1.0);
    }
</script>
<script type="module">
    import { Matrix4, Vector3, Vector2, Color, OrthographicCamera, PerspectiveCamera, Spherical } from '../js/three.module.js';
    import { CreateProgram, imgPromise } from '../js/Utils.js';
    import lib from '../js/ThreeLib.js';
    import CameraController from '../js/CameraController.js'
    import BoldLine from '../js/objs/BoldLine.js';

    import Geo from '../js/Poly2/Geo.js'
    import Mat from '../js/Poly2/Mat.js'
    import Obj3D from '../js/Poly2/Obj3D.js'
    import Scene from '../js/Poly2/Scene.js'


    //#region gl
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const gl = canvas.getContext("webgl");

    const scene = new Scene({ gl });
    scene.regProgram('color', {
        program: CreateProgram(gl,
            document.querySelector('#ColorVS').innerText,
            document.querySelector('#ColorFS').innerText),
        attribs: ['a_Position', 'a_Pin'],
        uniforms: ['u_PvM4', 'u_ModelM4', 'u_Sampler']
    });


    const A = new Vector2(0, 0);
    const B = new Vector2(0.5, 0);
    const C = new Vector2(0.0, -0.5);

    const boldLine = new BoldLine([A, B, C], 0.3);
    const [vertices, elements, uv] = [boldLine.vertices, boldLine.elements, boldLine.uv];


    const obj3D = new Obj3D({
        geo: new Geo({
            data: {
                'a_Position': { size: 2, array: new Float32Array(vertices) },
                'a_Pin': { size: 2, array: new Float32Array(uv) },
            },
            element: { array: new Uint16Array(elements) }
        }),
        mat: new Mat({
            program: 'color',
            mode: ['TRIANGLES'],
            data: {
                'u_PvM4': { type: 'uniformMatrix4fv', value: new Matrix4().elements },
                'u_ModelM4': { type: 'uniformMatrix4fv', value: new Matrix4().elements },
            }
        })
    });
    scene.add(obj3D);

    const earthImage = new Image();
    earthImage.src = '../Image/road.jpg';
    earthImage.addEventListener('load', function () {
        obj3D.addTexure(gl, 'u_Sampler', {
            image: earthImage,
            MIN_FILTER: gl.LINEAR,
            MAG_FILTER: gl.LINEAR,
        });
        scene.draw();
    });





</script>

</html>